/* 
 * 导入外部资源支持：CommonJS和ES6Module两种规范 
 *   ES6Module：import/export
 *   CommonJS：require/module.export
 */
import React from 'react';
import ReactDOM from 'react-dom';

/* 
// import './assets/common.less';
require('./assets/common.less');
let name = "珠峰培训2020 => 1024+996";
let styOBJ = {
	color: 'red'
};
//=>JSX虚拟DOM对象
let obj = React.createElement('h3', null, '哈哈哈');
ReactDOM.render(<>
	<div style={styOBJ} className='text'>{name}</div>
	{obj}
</>, document.getElementById('root'));
 */

let sex = 0;
let arr = [{ name: '张三', age: 25 }, { name: '李四', age: 26 }]
ReactDOM.render(<>
	<div>性别：{sex === 0 ? '男' : '女'}</div>
	<ul>{arr.map((item, index) => {
		return <li key={index}>
			姓名：{item.name}
			年龄：{item.age}
		</li>;
	})}</ul>
</>, document.getElementById('root'));

/*
 * JSX：javascript and xml（html）
 *   1.最外层只能有一个根元素节点
 *   2.<></>  fragment空标记，即能作为容器把一堆内容包裹起来，还不占层级结构
 *   3.动态绑定数据使用{}，大括号中存放的是JS表达式（JS表达式：执行代码得有返回的结果）
 * 		=> 可以直接放数组：把数组中的每一项都呈现出来
 *      => 一般情况下不能直接渲染对象
 * 		=> 但是如果是JSX的虚拟DOM对象，是直接可以渲染的
 *   4.设置行内样式，必须是 style={{color:'red'...}}；设置样式类名需要使用的是className；
 *   5.JSX中进行的判断一般都要基于三元运算符来完成
 *   6.JSX中遍历数组中的每一项，动态绑定多个JSX元素，一般都是基于数组中的MAP来实现的（MAP迭代数组的同时，支持返回值） =>和vue一样，循环绑定的元素要设置key值（作用：用于DOM-DIFF差异化对比）
 * 
 * JSX语法具备很强的编程性，而这是Vue中模板语法不具备的，所以Vue从新版本(V2.xx)开始，支持了JSX语法  https://cn.vuejs.org/v2/guide/render-function.html
 * 
 * JSX语法具备过滤效果（过滤非法内容），有效防止XSS攻击（扩展思考：总结常见的XSS攻击和预防方案？）
 */